<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>demo</title>
	<!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
    <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css" />
	<link href="https://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/admin.css">
<!--     <link rel="stylesheet" type="text/css" href="/dist/css/formValidation.css">
<script type="text/javascript" src="/dist/js/formValidation.js"></script>
<script type="text/javascript" src="/dist/js/framework/bootstrap.js"></script>
<script type="text/javascript" src="/dist/js/language/zh_CN.js"></script> -->

   <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
   <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
   <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.min.js"></script>

    <link href="https://cdn.bootcss.com/summernote/0.8.8/summernote.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/summernote/0.8.8/summernote.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-10">
            @if (session('msg'))
				 <div class="alert {{(session('code')==200)?'alert-success':'alert-danger'}} alert-dismissible fade in" role="alert">
				    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				    {{ session('msg') }}
				 </div>
			@endif

            @if (count($errors) > 0)
                <div class="alert alert-danger">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div style="padding-bottom: 10px; text-align: right;">
                 <button type="button" onclick="addBox();" class="btn btn-primary">添加</button>
            </div>
                <form id="defaultForm" action="/admin/web">
                        {!! csrf_field() !!}
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">新增商品(form表单提交)</h3>
                            </div>
                            <div class="panel-body">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name">用户名</label>
                                            <input type="text" class="form-control" name="username" value="{{old('username')}}" placeholder="请输入用户名">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name">手机号码</label>
                                            <input type="text" class="form-control" name="mobile" value="{{old('mobile')}}" placeholder="请输入手机号码">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name">密码</label>
                                            <input type="password" class="form-control" name="password" placeholder="请输入密码">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name">确认密码</label>
                                            <input type="password" class="form-control" name="confirmPassword"  placeholder="请再次输入密码">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name" id="captchaOperation"></label>
                                            <input type="text" class="form-control" name="captcha">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name">网址</label>
                                            <input type="text" class="form-control" name="website" value="{{old('website')}}" placeholder="请输入网址">
                                        </div>
                                    </div>
                                     <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name">中文字符验证</label>
                                    <input type="text" class="form-control" name="cnname" value="{{old('cnname')}}" placeholder="请输入中文字符">
                                </div>
                                                                 </div>
                                                                 <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name">特殊字符验证</label>
                                    <input type="text" class="form-control" name="cname" value="{{old('cname')}}" placeholder="请输入字符">
                                </div>
                                     </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name">商品名称</label>
                                            <input type="text" class="form-control" name="name" value="{{old('name')}}" placeholder="请输入商品名称">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name">商品价格(元)</label>
                                            <input type="text" class="form-control" name="price" value="{{old('price')}}" placeholder="请输入价格">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="name">商品库存</label>
                                            <input type="text" class="form-control" name="stock" value="{{old('stock')}}" placeholder="请输入库存">
                                        </div>
                                    </div>
                                   <div class="col-md-12">
                                       <div class="form-group">
                                           <label for="name">商品详情</label>
                                           <textarea id="summernote" name="details"></textarea>
                                       </div>
                                   </div>
                                    <div class="col-md-12">
                                         <div class="form-group" style="text-align: center;">
										     <button type="submit" class="btn btn-primary">保存</button>
                         <a href="javascript:history.back();" class="btn btn-default">返回</a>
										</div>
									</div>
                                </div>
                        </div>
                 </form>
            </div>
        </div>
    </div>

    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form id="addfrm" method="post" action="/admin/add">
                <input type="hidden" name="_token" value="{{csrf_token()}}">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新增商品</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name" class="control-label">用户名:</label>
                            <input type="text" name="pname1"  class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="name" class="control-label">电话:</label>
                            <input type="text" name="mobile1"  class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" id="addBtn" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
    <script type="text/javascript">
$(document).ready(function() {
            $('#summernote').summernote({
            height:'150px',
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture']],
                ['view', ['fullscreen', 'codeview', 'help']],
                ['myplugin', ['aceCodeEditor']]
            ]
        });
			function randomNumber(min, max) {
		        return Math.floor(Math.random() * (max - min + 1) + min);
		    };
		    function generateCaptcha() {
		        $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
		    };
		    generateCaptcha();
    $('#defaultForm').bootstrapValidator({
        	/*onError: {
		           container: 'tooltip'
		        },*/
           /* container: 'tooltip', //bootstrap 3.1
		    trigger: 'blur',*/
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
                username: {
                    validators: {
                        notEmpty: {
                            message: 'The username address is required'
                        },
                        /*stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long'
                        },*/
                        /*remote: {
                            url: 'remote.php',
                            message: 'The username is not available'
                        },*/
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]{6,30}$/,
                            message: 'The username can only consist of alphabetical, number, dot and underscore'
                        }
                    }
                },
               cnname:{
                    validators: {
                       notEmpty: {
                            message: '中文字符不能为空'
                        },
                        regexp: {
                            regexp: /^[\u4e00-\u9fa5]+$/,
                            message: '中文字符格式不正确'
                        }
                    }
                },
                cname:{
                     validators: {
                           notEmpty: {
                                message: '特殊字符不能为空'
                            },
                            regexp: {
                                regexp: /^[\x21-\x7E,A-Z,a-z,0-9]{6,18}$/,
                                message: '特殊字符格式不正确,长度6-18'
                            }
                    }
                },
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The email address is required and can\'t be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        },
                        remote: {
                                type: 'POST',
                                url: '/admin/checkEmail',
                                data:{"_token":"{{csrf_token()}}"},
                                message: 'The email is not available',
                                delay: 1000
                        }
                    }
                },
                 password: {
                        validators: {
                            notEmpty: {
                                message: 'The password is required and can\'t be empty'
                            }
                        }
                },
                confirmPassword: {
                    validators: {
                        notEmpty: {
                            message: 'The confirm password is required and can\'t be empty'
                        },
                        identical: {
                            field: 'password',
                            message: 'The password and its confirm are not the same'
                        }
                    }
                },
                website: {
                    validators: {
                        uri: {
                            message: 'The input is not a valid URL'
                        }
                    }
                },
                 mobile: {
                    validators: {
                        phone: {
                            country:'CN',
                            message: 'The input is not a valid phone number'
                        }
                    }
                },
                captcha: {
                    validators: {
                        callback: {
                            message: 'Wrong answer',
                            callback: function(value, validator, $field) {
                                var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                                return value == sum;
                            }
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e) {
                     // 终止重复提交
                     e.preventDefault();
                     // 得到form表单对象
                     var $form = $(e.target);
                     // 获得bootstrap验证对象
                     //var bv = $form.data('bootstrapValidator');
                     // 使用Ajax提交form表单数据
                     $.post($form.attr('action'), $form.serialize(), function(result) {
                         console.log(result);
                    }, 'json');
                 });

        $('#addfrm').bootstrapValidator({
            /*err: {
                   container: 'tooltip'
                },
            trigger: 'blur',*/
            container: 'tooltip',
            trigger: 'blur',
            // autoFocus:true;
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
                pname1: {
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]{6,20}$/,
                            message: '用户名只能包含字母、数字和下划线,长度6-20'
                        }
                    }
                },
                 mobile1: {
                    validators: {
                        notEmpty: {
                            message: '电话号码不能为空'
                        },
                        phone: {
                            country:'CN',
                            message: '电话号码格式不正确'
                        }
                    }
                }
            }
        });
});
// modal框ajax提交
$("#addBtn").click(function () {
        //进行表单验证
        var form=$('#addfrm');
        var bv = form.data('bootstrapValidator');
        bv.validate();
        if (bv.isValid()) {
           // Use Ajax to submit form data
            $.post(form.attr('action'), form.serialize(), function(result) {
                console.log(result);
                $('#myModal').modal('hide');
                window.location.reload();
            }, 'json');
        }
        form.find('.has-error').eq(0).find('input').eq(0).focus();
        return false;
    });
</script>
<script type="text/javascript">
function addBox(){
    $('#myModal').modal();
};
</script>